﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>hr标签默认样式</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<p>默认水平线：</p>
			<hr class="hr" />
			<p>点状线：</p>
			<hr class="hr hr-dotted" />
			<p>虚线：</p>
			<hr class="hr hr-dashed" />

			<p>红色水平线：</p>
			<hr class="hr c-red" />
			<p>橙色水平线：</p>
			<hr class="hr c-orange" />
			<p>黄色水平线：</p>
			<hr class="hr c-yellow" />
			<p>绿色水平线：</p>
			<hr class="hr c-green" />
			<p>天蓝色水平线：</p>
			<hr class="hr c-teal" />
			<p>蓝色水平线：</p>
			<hr class="hr c-blue" />
			<p>紫蓝色水平线：</p>
			<hr class="hr c-violet" />
			<p>紫色水平线：</p>
			<hr class="hr c-purple" />
			<p>粉色水平线：</p>
			<hr class="hr c-pink" />
			<p>棕色水平线：</p>
			<hr class="hr c-brown" />
			<p>白色水平线：</p>
			<hr class="hr c-white" />
			<p>深色水平线：</p>
			<hr class="hr c-dark" />
			<p>灰色水平线：</p>
			<hr class="hr c-grey" />

			<p>2倍高水平线：</p>
			<hr class="hr hr-x2" />
			<p>3倍高水平线：</p>
			<hr class="hr hr-x3" />

			<p>组合应用 1：</p>
			<hr class="hr hr-dashed hr-x3 c-orange" />
			<p>组合应用 2：</p>
			<hr class="hr hr-dotted hr-x2 c-teal" />
			<p>组合应用 3：</p>
			<hr class="hr hr-x3 c-red" />

			<p>div模拟水平线：</p>
			<div class="hr hr-x3 c-blue"></div>
		</div>
	</fieldset>

</body>
</html>
